<template>
  <c-layout>
    <template #header>
      <c-card title="查询条件">
        <c-forms :model="formData" :rules="rules" ref="form" showBtn :ok="submit">
          <c-formitems :form-data="formData" v-for="item in formItems" :key="item.value" :config="item"></c-formitems>
        </c-forms>
      </c-card>
    </template>
    <template #main>
      <div class="mag" @click="click">{{ mag }}</div>
      <div class="mag" @click="click">{{ mag }}</div>
      <div class="mag" @click="click">{{ mag }}</div>
      <div class="mag" @click="click">{{ mag }}</div>
      <div class="mag" @click="click">{{ mag }}</div>
      <div class="mag" @click="click">{{ mag }}</div>
    </template>
  </c-layout>
</template>
<script>
import { ref, reactive, getCurrentInstance } from 'vue'
import { test } from '@/api/creditCollection.js'
// import layout from '@common/base/layout.vue'
// import card from '@common/base/card.vue'
// import formitems from '@common/base/formitems.vue'
// import forms from '@common/base/forms.vue'
export default {
  // components: { layout, card, forms, formitems },
  setup() {
    const { proxy } = getCurrentInstance()
    let mag = ref('士大夫士大夫')
    const search = reactive({
      name: '',
      region: '',
    })
    function click() {
      search.name = '士大夫大师傅'
      console.log(formData)
      test().then(() => {
        console.log('调用了')
      })
    }
    let formData = reactive({
      name: '',
      region: '',
      num: 1,
      date: '',
      value1: '',
    })
    let formItems = [
      {
        type: 'input',
        label: '姓名',
        value: 'name',
      },
      {
        type: 'date',
        label: '心别',
        value: 'region',
      },
    ]
    let rules = {
      name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
      ],
    }
    function submit() {
      proxy.$refs.form
        .validate()
        .then(() => {
          console.log('通过')
        })
        .catch(() => {
          console.log('不通过')
        })
    }
    return { mag, search, click, formData, formItems, rules, submit }
  },
}
</script>
<style lang="scss">
.mag {
  color: red;
}
</style>
